<script lang="ts" setup>
import type { ListArticleRes } from '@/types/api/other'
import { otherApi } from '@/request/api'
import { onLoad } from '@dcloudio/uni-app'
import { to } from 'await-to-js'
import { ref } from 'vue'

const list = ref<ListArticleRes['data']>([])

onLoad(async () => {
  const [err, res] = await to(otherApi.listArticle())
  if (err) {
    return
  }
  list.value = res.data
})
</script>

<template>
  <view class="bg-theme-pagebg px-30px pt-30px safe-pb-30px">
    <template v-for="(group, g) in list" :key="group.id">
      <view class="h-26px rd-t-16px bg-white" :class="{ 'mt-10px': g !== 0 }"></view>
      <view class="sticky top-0 z-1 rd-b-16px bg-white px-35px text-34px text-#3 font-500 lh-80px">{{ group.typeName }}</view>
      <view class="overflow-hidden rd-b-16px bg-white px-10px pt-16px -mt-16px">
        <uni-collapse accordion>
          <template v-for="item in group.listArticle" :key="item.id">
            <uni-collapse-item>
              <template #title>
                <view class="pl-25px pr-10px text-28px font-400 lh-80px">{{ item.title }}</view>
              </template>
              <view class="px-25px pb-35px text-26px lh-[1.5]">{{ item.articleContent }}</view>
            </uni-collapse-item>
          </template>
        </uni-collapse>
      </view>
    </template>
  </view>
</template>

<style lang="less" scoped></style>
